<template>
  <Modal
    v-model:active="CFDMeshActiveModalVueActive"
    hide-mask
    draggable
    :mask-close="false"
    transfer
    title="流体边界层网格"
    :width="480"
    :height="600"
    confirm-text="网格剖分"
    @confirm="setMesh"
  >
    <NativeScroll use-y-bar height="100%" scroll-style="padding: 14px;">
      <ConfigProvider :props="providedProps">
        <Form :model="formModel" style="padding: 24px">
          <Row align="middle" justify="start" :gap="[8]">
            <Column :span="24">
              <div class="title">
                <div class="title_color"></div>
                <div class="title_content">实体类型</div>
              </div>
            </Column>
          </Row>
          <Column :span="18" :offset="6">
            <FormItem label="类型:" prop="select">
              <Select
                :options="GeomSelectTypeOptions"
                v-model:value="elementType"
                @select="elementTypeSelect"
              ></Select>
            </FormItem>
          </Column>
          <Row align="middle" justify="start" :gap="[8]">
            <Column :span="24">
              <div class="title">
                <div class="title_color"></div>
                <div class="title_content">选择器</div>
              </div>
            </Column>
          </Row>
          <Column :span="18" :offset="6">
            <FormItem label="实体:" prop="select">
              <Button type="primary" @click="selectGeom">选择实体</Button>
            </FormItem>
            <FormItem label="边界层:" prop="select">
              <Button type="primary" @click="selectFace">选择面</Button>
            </FormItem>
          </Column>
          <Row align="middle" justify="start" :gap="[8]">
            <Column :span="24">
              <div class="title">
                <div class="title_color"></div>
                <div class="title_content">边界层参数</div>
              </div>
            </Column>
          </Row>
          <Column :span="18" :offset="6">
            <FormItem label="第一层厚度:" prop="select">
              <Input
                v-model:value="formModel.boundaryLayer.absoluteHeight"
                clearable
              ></Input>
            </FormItem>
            <FormItem label="增长率:" prop="select">
              <Input
                v-model:value="formModel.boundaryLayer.desiredStretching"
                clearable
              ></Input>
            </FormItem>
            <FormItem label="最终层比率:" prop="select">
              <Input
                v-model:value="formModel.boundaryLayer.endRate"
                clearable
              ></Input>
            </FormItem>
            <FormItem label="层数:" prop="select">
              <Input
                v-model:value="formModel.boundaryLayer.numLayers"
                clearable
              ></Input>
            </FormItem>
          </Column>
          <Row align="middle" justify="start" :gap="[8]">
            <Column :span="24">
              <div class="title">
                <div class="title_color"></div>
                <div class="title_content">参数</div>
              </div>
            </Column>
          </Row>
          <Column :span="18" :offset="6">
            <FormItem label="表面单元尺寸:">
              <Input
                v-model:value="formModel.surfaceMesh.meshSize"
                clearable
              ></Input>
            </FormItem>
            <FormItem label="最大四面体网格尺寸:">
              <Input
                v-model:value="formModel.tetraMesh.meshSizeMax"
                clearable
              ></Input>
            </FormItem>
            <FormItem prop="select">
              <Button type="primary" @click="calculate">计算</Button>
              <Button type="primary" @click="reset">重置</Button>
            </FormItem>
          </Column>
          <Column :span="18" :offset="6">
            <FormItem label="二维单元类型:">
              <Select
                :options="surfMeshElemTypeOptions"
                v-model:value="formModel.surfaceMesh.elemType"
                @select="elementTypeSelect"
              ></Select>
            </FormItem>
          </Column>
        </Form>
      </ConfigProvider>
    </NativeScroll>
  </Modal>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import {
  Modal,
  Input,
  Select,
  Divider,
  Form,
  FormItem,
  NativeScroll,
  ConfigProvider,
  Checkbox,
  Row,
  Column,
  Button,
} from "cax-ui";
import { storeToRefs } from "pinia";
import { useCoreStore, _global } from "@/UI/store";
let { CFDMeshActiveModalVueActive } = storeToRefs(useCoreStore());
const coreStore = useCoreStore();
const providedProps = {
  default: { clearable: true },
  formItem: { required: false },
};
const elementType = 1;

const formModel = reactive({
  action: "mesh",
  boundaryLayer: {
    absoluteHeight: "0.01",
    desiredStretching: "1.2",
    endRate: "0",
    numLayers: "1",
  },
  meshType: "cfdbl",
  surfaceMesh: {
    elemType: "ETri",
    meshSize: 1.19,
  },
  tetraMesh: {
    elementOrder: 1,
    meshSizeMax: 2.975,
  },
  withoutCheckSolid: 1,
});
const GeomSelectTypeOptions = [
  {
    label: "几何",
    value: 1,
  },
  {
    label: "表面网格",
    value: 2,
  },
];
const surfMeshElemTypeOptions = [
  {
    label: "三角形",
    value: "ETri",
  },
  {
    label: "三角形/四边形",
    value: "ETri/QAID",
  },
];
function selectGeom() {
  coreStore.setEngineState(2);
}
function calculate() {
  formModel.action = "computerSize";
  _global.Engine.mesh.cfdMeshCreate(formModel).then((result: any) => {
    formModel.surfaceMesh.meshSize = result.meshSize;
    formModel.tetraMesh.meshSizeMax = result.meshSizeMax;
  });
}
function reset() {
  formModel.surfaceMesh.meshSize = 0.0;
  formModel.tetraMesh.meshSizeMax = 0.0;
}
function selectFace() {
  // 选取面的时候先取消选中实体，但是不能清除state中选中的实体id,渲染很慢
  _global.Engine.system?.setFaceDefaultColor();
  coreStore.setEngineState(0);
}
function elementTypeSelect(value: number) {}
function setMesh() {
  formModel.action = "mesh";
  _global.Engine.mesh
    .cfdMeshCreate(formModel)
    .then((result: any) => {
      coreStore.setBomInfo(result);
    })
    .finally(() => {
      coreStore.setEngineState(0);
    });
}
</script>

<style scoped lang="less">
.title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;

  .title_color {
    width: 4px;
    height: 12px;
    background: #339af0;
    margin-right: 8px;
  }
  .title_content {
    opacity: 1;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    /* content/主要一级primary */
    /* 样式描述：--vxp-content-color-primary */
    color: #212529;
  }
}
</style>
